<template>
	<view class="my">
		<view class="top">
			<!-- <Navbar></Navbar> -->
			<view class="bg">
				<view class="userInfo" v-if="openid">
					<view class="avatar">
						<image src="../../static/八维票务小程序 UI 切图/PNG/2x/Icon/User 36.png" mode=""></image>
						<text>{{phone}}</text>
					</view>

					<view class="change_user">
						<text>切换账号</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="user_not_login" v-else @click="toLogin">
					<image src="../../static/八维票务小程序 UI 切图/PNG/1x/Icon/User 60.png" mode="" />
					<text>登录/注册</text>
				</view>


			</view>
			<view class="redius">

			</view>
		</view>

		<view class="info">
			<u-cell-group>
				<u-cell size="large" title="乘客列表" isLink url="/pages/passenger/passenger">
					<template #icon>
						<image src="../../static/八维票务小程序 UI 切图/PNG/2x/Icon/联系人.png" mode=""></image>
					</template>
				</u-cell>
				<u-cell size="large" title="我的订单" isLink @click="toOrder">
					<template #icon>
						<image src="../../static/八维票务小程序 UI 切图/PNG/2x/Icon/订单.png" mode=""></image>
					</template>
				</u-cell>
				<u-cell size="large" title="客服中心" isLink url="/pages/ai/ai">
					<template #icon>
						<image src="../../static/八维票务小程序 UI 切图/PNG/2x/Icon/个人中心 客服.png" mode=""></image>
					</template>
				</u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from "vue";

	const toOrder = () => {
		uni.switchTab({
			url: '/pages/order/order'
		})
	}

	let openid = ref()
	let phone = ref()

	onShow(() => {
		openid.value = uni.getStorageSync('userInfo').openid
		phone.value = uni.getStorageSync('userInfo').phone
	})

	function toLogin() {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
</script>

<style lang="scss" scoped>
	page,
	.my {
		width: 100%;
		height: 100%;

		.top {
			.bg {
				width: 100%;
				height: 180px;
				background-color: #1BA9BA;
				padding: 20rpx;

				.user_not_login {
					position: absolute;
					left: 50%;
					top: 20%;
					transform: translate(-50%, -110%);
					display: flex;
					flex-direction: column;
					text-align: center;
					color: #ffffff;

					image {
						width: 100px;
						height: 100px;
					}
				}

				.userInfo {
					width: 95%;
					height: 80px;
					background-color: #1BA9BA;
					display: flex;
					align-items: center;
					color: white;

					.avatar {
						width: 60%;
						display: flex;
						justify-content: space-around;
						align-items: center;
						font-size: 20px;

						image {
							width: 50px;
							height: 50px;
						}
					}

					.change_user {
						width: 40%;
						display: flex;
						justify-content: flex-end;
						padding-right: 20rpx;
					}
				}
			}

			.redius {
				width: 100%;
				height: 40px;
				background-color: #1BA9BA;
				border-bottom-left-radius: 50%;
				border-bottom-right-radius: 50%;
			}
		}

		.info {
			width: 94%;
			height: 210px;
			background-color: #ffffff;
			box-shadow: 0px 2px 48px 0px rgba(0, 0, 0, 0.1);
			border-radius: 10px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -90%);

			image {
				width: 40px;
				height: 40px;
			}
		}
	}
</style>